<template>
  <div class="container">
    <el-row>
    <span>{{$route.query.userId}}</span>
    <span>{{$route.query.tableId}}</span>
    </el-row>
  <el-table
    :data="menuList"
    style="width: 100%">
    <el-table-column
      label="菜单号">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuId }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="菜品名称">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="菜品价格">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuPrice }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="菜品类型">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuClass }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="order(scope.row)"><i class="el-icon-circle-plus"></i>加入购物车</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="block">
      <!-- page-size="5" 默认每页显示条数 -->
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</div>
</template>

<script>
  export default {
    name: "menuListEle",  //tableListEle只是一个属性描述，
    data() {
      return {
        userName:"",
        userId:0,
        
        menuList: [],
        menuForm: { // 表单的请求对象
          //userId:null,
          tableId:null,
          menuId: null,
          menuName: "",
          menuCost: null,
          menuPrice: null,
          menuClass: "",
          menuDepartment: "",
        },
        total: 0,  //总条数
        totalPage: 0,   //总页数
        curPage: 1,   //当前页
        rows:5,     //每页条数
        isShow:false,
        title:""
      }
    },
    methods: {

      loaddata() { // 加载函数
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/menu/menuList",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows
          },
          dataType: "json",
          success: function(data) {
            console.log(data);
            mythis.menuList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage;
          }
        })
      },
      order(x){
        var mythis = this;
        //x.userId = localStorage.getItem("userId");
        x.tableId = localStorage.getItem("tableId");
        $.ajax({
          url: "http://localhost:8080/api/utMenuInfo",
          type: "put",
          contentType: "application/json",
          data: JSON.stringify(x),
          success: function(data) {
            //alert(data.info);
            //mythis.$alert(data.info);
            mythis.$message(data.info);
            if (data.info == "加入购物车成功") {
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },
      // v 传递选择的页数
      handleCurrentChange(v){ //当前页触发事件
        this.curPage=v;
        this.loaddata();
      }
    },
    mounted() {
      var user = sessionStorage.getItem("user");
      var jsonUser = JSON.parse(user);
      this.userName =  jsonUser.userName;
      this.userId =  jsonUser.userId;
      this.loaddata();
    }
  }
</script>

<style>
</style>
